<template>
    <base-dialog v-bind="$attrs" v-on="$listeners" :title="title" size="tinylong" @submit="toAdd"  :disabled="disabled">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px" :disabled="disabled">
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="数据值类型" prop="type" @change="changeType">
            <el-radio-group v-model="formData.type">
              <el-radio :label="0">text</el-radio>
              <el-radio :label="1">number</el-radio>
              <el-radio :label="6">boolean</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="数据值" prop="value">
            <el-input v-model="formData.value" placeholder="请输入数据值" v-if="formData.type==0"/>
            <el-input-number v-model="formData.value" placeholder="请输入数据值" v-else-if="formData.type==1" :min="0" :style="{width: '100%'}"/>
            <el-radio-group v-model="formData.value"  v-else-if="formData.type==6">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <dict-radio v-model="formData.status" distKey="button_status_bool"></dict-radio>
          </el-form-item>
          <el-form-item label="颜色">
            <el-color-picker v-model="formData.color"></el-color-picker>
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number v-model="formData.no_order"></el-input-number>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="formData.remark" type="textarea"></el-input>
          </el-form-item>
        </el-form>
    </base-dialog>
</template>
<script>
    import BaseDialog from "@/components/Common/BaseDialog";
    import DetailDialog from "@/mixins/DetailDialog";
    import DeptSelectTree from '@/components/Common/DeptSelectTree'
    import SimpleSelect from '@/components/Common/SimpleSelect'
    import GenderFormItem from '@/components/FormItem/GenderFormItem'
    import DictRadio from '../../../../components/DictRadio/index'
    export default {
        mixins: [DetailDialog],
        components: { DictRadio, GenderFormItem, SimpleSelect, DeptSelectTree, BaseDialog},
        data() {
            return {
                formData: {
                  name:undefined,
                  type:1,
                  value:undefined,
                  status:true,
                  no_order:1,
                  parent:this.$route.query.id?this.$route.query.id*1:null,
                  remark:"",
                  color:""
                },
                rules: {
                  name: {
                    required: true,
                    message: "名称是必填",
                    trigger: "blur"
                  },
                  value: {
                    required: true,
                    message: "数据值为必填",
                    trigger: "blur"
                  }
                },
                statusOptions:[],
                apiUrl:"systemManagement/dict"
            }
        },
        computed: {
            title() {
                return this.disabled ? '查看' : this.formData.id ? "编辑" : "新增"
            },
        },
        watch: {},
        created() {
        },
        mounted() {
        },
        methods: {
          changeType(v){
            if(v==0){
              this.formData.value=""
            }else if(v==1){
              this.formData.value=0
            }else if(v==2){
              this.formData.value=true
            }
          }
        }

    }
</script>
